<!--
 * @FilePath: qiu.vue
 * @@author: wjj
 * @Date: 2024-11-06 15:08:43
 * @@Description: new js file
-->
<template>
  <div style="background-color: #010201">
    <span @click="goHome">首页</span>
  </div>
  <div class="chart-container" ref="charts">
    <!-- 盒子将来echarts展示图形图标的节点 -->
  </div>
</template>

<script setup lang="ts">
import 'echarts-liquidfill'
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import 'echarts-gl'
import { useRouter } from 'vue-router'
import qq1 from '@/3D/image/earth.jpg'
import qq2 from '@/3D/image/starfield.jpg'
//获取路由器对象
let $router = useRouter()
//按钮的点击回调
const goHome = () => {
  $router.push('/home')
}
//水球图拓展插件
// let ROOT_PATH = 'https://echarts.apache.org/examples'
//获取节点
let charts = ref()
onMounted(() => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  })
  //设置实例的配置项
  mycharts.setOption({
    backgroundColor: '#000',
    globe: {
      baseTexture: qq1,
      shading: 'lambert',
      environment: qq2,
      atmosphere: {
        show: true,
      },
      light: {
        ambient: {
          intensity: 0.1,
        },
        main: {
          intensity: 1.5,
        },
      },
    },
    series: [],
  })
})
</script>
<script lang="ts">
export default {
  name: 'qiu',
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
canvas {
  height: 100%;
}
</style>
